﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Metropolis - Portfolio</title>
        <meta name="description" content="Multipurpose HTML5 Themplate">
        <meta name="author" content="pixel-industry">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">


        <!-- stylesheets -->
        <link rel="stylesheet" href="css/basic.css" />
        <link rel="stylesheet" href="css/style.css" />   
        <link rel="stylesheet" href="css/responsive.css" />  
        <link rel="stylesheet" href="css/red.css" />
        <link rel="stylesheet" href="css/prettyPhoto.css" media="screen" />

        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

        <!-- Icons -->
        <link rel="stylesheet" href="pixons/style.css" />
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
        
        <link rel="stylesheet" href="style-switcher/styleSwitcher.css" media="screen" />

        <!--[if lt IE 9]>
            <script src="js/html5shiv.js"></script>
        <![endif]-->
        
        <!--[if lt IE 9]>
            <script src="js/selectivizr-min.js"></script>
        <![endif]-->
        
        <!--[if IE 8]>
            <link rel="stylesheet" href="css/ie8.css" media="screen" />
        <![endif]-->
    </head>

    <body>
         <!-- style switcher start -->
        <section id="style-switcher">
            <section id="styles-container">
                <section>
                    <h6>Layouts</h6>
                    <ul class="skin-list">
                        <li class="metropolis-default"><a href="../metropolis-default/portfolio2-alt.html">Default</a></li>
                        <li class="metropolis-clean active"><a href="#">Clean & Minimal</a></li>
                        <li class="metropolis-blue"><a href="../metropolis-blue/portfolio2-alt.html">Creative Blue</a></li>
                    </ul>
                </section>

                <section class="first">
                    <h6>Color Style</h6>
                    <p>Which theme color you want to use? Here are some predefined colors.</p>
                    <ul class="styles-list">
                        <li class="blue">1</li>
                        <li class="green">2</li>
                        <li class="orange">3</li>                        
                        <li class="red">4</li>
                        <li class="yellow">5</li>
                    </ul>
                </section>
            </section>
            <a href="#" id="styles-button"><div id="switcher-logo"></div></a>
        </section><!-- style switcher end -->
        
        <!-- #header-wrapper start -->
        <section id="header-wrapper" class="clearfix">
            <!-- #header start -->
            <header id="header" class="clearfix">

                <!-- #logo start -->
                <section id="logo">
                    <a href="index.html">
                        <img src="img/red/logo.png" alt="logo" />
                    </a>
                </section><!-- #logo end -->

                <!-- contact-info-container -->
                <section id="contact-info-container">
                    <ul class="info">
                        <li>
                            <span class="text-dark">Call us on:</span> +00 123 5874
                        </li>

                        <li>
                            <span class="text-dark">Email: </span>
                            <a class="text-color" href="malito:sales-info@business.com">sales-info@business.com</a>
                        </li>
                    </ul>

                    <ul class="social-links">
                        <li>
                            <a href="#" class="pixons-twitter-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-linkedin"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-facebook-1"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-xing"></a>
                        </li>

                        <li>
                            <a href="#" class="pixons-skype"></a>
                        </li>
                    </ul>
                </section><!-- .contact-info-container end -->
            </header><!-- #header end -->

            <!-- #nav-container start -->
            <section id="nav-container">

                <section class="container_12">
                    <section class="grid_12">
                        <!-- #nav start -->
                        <nav id="nav">
                            <ul>
                                <li>
                                    <span class="nav-icon icon-home"></span>
                                    <a href="index.html">Home</a>
                                </li>

                                <li>
                                    <span class="nav-icon icon-user"></span>
                                    <a href="#">Pages</a>
                                    <ul>
                                        <li><a href="about.html">About</a></li>
                                        <li><a href="services.html">Services</a></li>
                                        <li><a href="faq.html">FAQ</a></li>
                                        <li><a href="page-sidebar-left.html">Page sidebar left</a></li>
                                        <li><a href="page-sidebar-right.html">Page sidebar right</a></li>
                                        <li><a href="pricing.html">Pricing tables</a></li>
                                    </ul>
                                </li>

                                <li class="current-menu-item">
                                    <span class="nav-icon icon-camera"></span>
                                    <a href="#">Portfolio</a>
                                    <ul>
                                        <li><a href="portfolio1.html">Portfolio 1</a></li>
                                        <li><a href="portfolio2.html">Portfolio 2</a></li>
                                        <li class="current-menu-item"><a href="portfolio2-alt.html">Portfolio 2 alternative</a></li>
                                        <li><a href="portfolio3.html">Portfolio 3</a></li>
                                        <li><a href="portfolio3-alt.html">Portfolio 3 alternative</a></li>
                                        <li><a href="portfolio4.html">Portfolio 4</a></li>
                                        <li><a href="portfolio4-alt.html">Portfolio 4 alternative</a></li>
                                        <li><a href="portfolio-gallery.html">Portfolio gallery</a></li>
                                        <li><a href="portfolio-single.html">Portfolio single</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-list"></span>
                                    <a href="#">Blog</a>

                                    <ul>
                                        <li><a href="blog.html">Blog default</a></li>
                                        <li><a href="blog-alt.html">Blog alternative</a></li>
                                        <li><a href="blog-single.html">Blog single</a></li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-cogs"></span>
                                    <a href="#">Shortcodes</a>
                                    <ul>
                                        <li><a href="shortcodes.html">Page elements</a></li>
                                        <li><a href="#">Third level</a>
                                            <ul>
                                                <li><a href="#">Menu item</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>

                                <li>
                                    <span class="nav-icon icon-map-marker"></span>
                                    <a href="contact.html">Contact</a>
                                </li>
                            </ul>
                        </nav><!-- #nav end -->
                        
                        <!-- responsive navigation start -->
                        <select id="nav-responsive">
                            <option selected="" value="">Site Navigation...</option>

                            <option value="index.html">Home version 1</option>

                            <option value="about.html">About us</option>
                            <option value="services.html">Services</option>
                            <option value="faq.html">FAQ Page</option>
                            <option value="page-sidebar-left.html">Page sidebar left</option>
                            <option value="page-sidebar-right.html">Page sidebar right</option>
                            <option value="pricing.html">Pricing tables</option>

                            <option value="portfolio1.html">Portfolio 1 column</option>
                            <option value="portfolio2.html">Portfolio 2 columns</option>
                            <option value="portfolio2-alt.html">Portfolio 2 alternative</option>
                            <option value="portfolio3.html">Portfolio 3 columns</option>
                            <option value="portfolio3-alt.html">Portfolio 3 alternative</option>
                            <option value="portfolio4.html">Portfolio 4 columns</option>
                            <option value="portfolio4-alt.html">Portfolio 4 alternative</option>
                            <option value="portfolio-gallery.html">Portfolio gallery</option>
                            <option value="portfolio-single.html">Portfolio single</option>

                            <option value="blog.html">Blog default</option>
                            <option value="blog-alt.html">Blog alternative</option>
                            <option value="blog-single.html">Blog single</option>

                            <option value="shortcodes.html">Shortcodes</option>
                            <option value="contact.html">Contact</option>
                        </select><!-- responsive navigation end -->

                        <section id="search-box">
                            <form action="#" method="get">
                                <input id="m_search" name="s" type="text" placeholder="Type and hit enter..." />
                                <input class="search-submit" type="submit" />
                            </form>
                        </section>
                    </section><!-- .grid_12 end -->
                </section><!-- .container_12 end -->
            </section><!-- #nav-container end -->
        </section><!-- #header-wrapper end -->

        <!-- .top-shadow -->
        <div class="top-shadow"></div>

        <!-- .page-title-container start -->
        <section class="page-title-container">

            <!-- .container_12 start -->
            <div class="container_12">

                <!-- .page-title start -->
                <div class="page-title grid_12">
                    <div class="title">
                        <h1>Portfolio 2 columns</h1>
                    </div>

                    <ul class="breadcrumbs">
                        <li><a  class="home" href="#">Home</a></li>
                        <li>/</li>
                        <li><span class="active">Portfolio 2 column alt</span></li>
                    </ul>
                </div><!-- .page-title end -->
            </div><!-- .container_12 end -->
        </section><!-- .page-title-container end -->

        <!-- #content-wrapper start -->
        <section id="content-wrapper">

            <div class="container_12">
                <section class="grid_12 quicksand-filter-container">
                    <span>CATEGORIES: </span>
                    <!-- portfolio quicksand filter start -->
                    <ul id="quicksand-filter">
                        <li class="active"><a class="all" href="#">All</a></li>
                        <li><a class="photography" href="#">Photography</a></li>
                        <li><a class="webdesign" href="#">Web Design</a></li>
                        <li><a class="graphicdesign" href="#">Graphic design</a></li>
                    </ul><!-- portfolio quicksand filter end -->
                </section><!-- quicksand-filter-container end -->
            </div><!-- .container_12 end -->

            <!-- .container_12 start -->
            <section class="container_12 clearfix">
                
                <!-- #filter-item start -->
                <ul id="filter-item">
                    
                    <!-- grid_6 portfolio-style-1 start -->
                    <li data-id="id-1" class="grid_6 portfolio-style-1"  data-alpha="photography">
                        
                        <!-- .portfolio start -->
                        <figure class="portfolio clearfix">
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-1.jpg" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-1.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <article class="portfolio-info">
                            <h3>Lorem Lpsum Dolor Sit Amet</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Web Design, Photography 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. Mauris ultricies, justo eu convallis 
                                placerat, felis enim ornare nisi, vitae mattis 
                                nulla ante id dui. Ut lectus purus, commodo et
                                tincidunt vel, interdum sed lectus. Vestibulum 
                                adipiscing tempor.
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- grid_6 portfolio-style-1 end -->
                    
                    <!-- grid_6 portfolio-style-1 start -->
                    <li data-id="id-2" class="grid_6 portfolio-style-1"  data-alpha="webdesign">
                        <!-- .portfolio start -->
                        <figure class="portfolio clearfix">
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-2.jpg" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-2.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <article class="portfolio-info">
                            <h3>Lorem Lpsum Dolor Sit Amet</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Web Design
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. Mauris ultricies, justo eu convallis 
                                placerat, felis enim ornare nisi, vitae mattis 
                                nulla ante id dui. Ut lectus purus, commodo et
                                tincidunt vel, interdum sed lectus. Vestibulum 
                                adipiscing tempor.
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- grid_6 portfolio-style-1 end -->
                    
                    <li class="clearfix"></li>
                    
                    <!-- grid_6 portfolio-style-1 start -->
                    <li data-id="id-3" class="grid_6 portfolio-style-1"  data-alpha="graphicdesign">
                        <!-- .portfolio start -->
                        <figure class="portfolio clearfix">
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-3.jpg" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-3.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <article class="portfolio-info">
                            <h3>Lorem Lpsum Dolor Sit Amet</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Graphic Design 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. Mauris ultricies, justo eu convallis 
                                placerat, felis enim ornare nisi, vitae mattis 
                                nulla ante id dui. Ut lectus purus, commodo et
                                tincidunt vel, interdum sed lectus. Vestibulum 
                                adipiscing tempor.
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- grid_6 portfolio-style-1 end -->
                    
                    <!-- grid_6 portfolio-style-1 start -->
                    <li data-id="id-4" class="grid_6 portfolio-style-1"  data-alpha="photography">
                        <!-- .portfolio start -->
                        <figure class="portfolio clearfix">
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-4.jpg" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-4.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <article class="portfolio-info">
                            <h3>Lorem Lpsum Dolor Sit Amet</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Web Design, Photography 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. Mauris ultricies, justo eu convallis 
                                placerat, felis enim ornare nisi, vitae mattis 
                                nulla ante id dui. Ut lectus purus, commodo et
                                tincidunt vel, interdum sed lectus. Vestibulum 
                                adipiscing tempor.
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- grid_6 portfolio-style-1 end -->
                    
                    <li class="clearfix"></li>
                    
                    <!-- grid_6 portfolio-style-1 start -->
                    <li data-id="id-5" class="grid_6 portfolio-style-1"  data-alpha="webdesign">
                        <!-- .portfolio start -->
                        <figure class="portfolio clearfix">
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-5.jpg" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-5.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <article class="portfolio-info">
                            <h3>Lorem Lpsum Dolor Sit Amet</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Web Design
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. Mauris ultricies, justo eu convallis 
                                placerat, felis enim ornare nisi, vitae mattis 
                                nulla ante id dui. Ut lectus purus, commodo et
                                tincidunt vel, interdum sed lectus. Vestibulum 
                                adipiscing tempor.
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- grid_6 portfolio-style-1 end -->
                    
                    <!-- grid_6 portfolio-style-1 start -->
                    <li data-id="id-6" class="grid_6 portfolio-style-1"  data-alpha="webdesign">
                        <!-- .portfolio start -->
                        <figure class="portfolio clearfix">
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-6.jpg" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-6.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <article class="portfolio-info">
                            <h3>Lorem Lpsum Dolor Sit Amet</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Web Design 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. Mauris ultricies, justo eu convallis 
                                placerat, felis enim ornare nisi, vitae mattis 
                                nulla ante id dui. Ut lectus purus, commodo et
                                tincidunt vel, interdum sed lectus. Vestibulum 
                                adipiscing tempor.
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- grid_6 portfolio-style-1 end -->
                    
                    <li class="clearfix"></li>
                    
                    <!-- grid_6 portfolio-style-1 start -->
                    <li data-id="id-7" class="grid_6 portfolio-style-1"  data-alpha="photography">
                        <!-- .portfolio start -->
                        <figure class="portfolio clearfix">
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-7.jpg" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-7.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <article class="portfolio-info">
                            <h3>Lorem Lpsum Dolor Sit Amet</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Photography 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. Mauris ultricies, justo eu convallis 
                                placerat, felis enim ornare nisi, vitae mattis 
                                nulla ante id dui. Ut lectus purus, commodo et
                                tincidunt vel, interdum sed lectus. Vestibulum 
                                adipiscing tempor.
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- grid_6 portfolio-style-1 end -->
                    
                    <!-- grid_6 portfolio-style-1 start -->
                    <li data-id="id-8" class="grid_6 portfolio-style-1"  data-alpha="graphicdesign">
                        <!-- .portfolio start -->
                        <figure class="portfolio clearfix">
                            <div class="portfolio-image">
                                <a href="portfolio-single.html">
                                    <img src="img/portfolio/1col/portfolio-8.jpg" alt="portfolio">
                                </a>

                                <div class="portfolio-hover">
                                    <div class="mask"></div>
                                    <ul>
                                        <li class="portfolio-zoom">
                                            <a href="img/portfolio/1col/portfolio-8.jpg" 
                                               data-gal="prettyPhoto[pp_gallery]">zoom
                                            </a>
                                        </li>

                                        <li class="portfolio-single">
                                            <a href="portfolio-single.html">single</a>
                                        </li>
                                    </ul>
                                </div><!-- .portfolio-hover end -->
                            </div><!-- .portfolio-image end -->
                        </figure><!-- .portfolio end -->

                        <article class="portfolio-info">
                            <h3>Lorem Lpsum Dolor Sit Amet</h3>

                            <ul class="meta">
                                <li>
                                    <span>
                                        Graphic Design 
                                    </span>
                                    //
                                </li>

                                <li class="date">APRIL 29, 2013</li>
                            </ul>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur 
                                adipiscing elit. Nam viverra euismod odio, 
                                gravida pellentesque urna varius vitae. Sed dui 
                                lorem, adipiscing in adipiscing et, interdum nec 
                                metus. Mauris ultricies, justo eu convallis 
                                placerat, felis enim ornare nisi, vitae mattis 
                                nulla ante id dui. Ut lectus purus, commodo et
                                tincidunt vel, interdum sed lectus. Vestibulum 
                                adipiscing tempor.
                            </p>
                            
                            <br />

                            <div class="btn-group">
                                <a class="btn-medium white" href="portfolio-single.html">
                                    <span>View Project</span>
                                </a>
                                
                                <a class="btn-medium white">
                                    <span>Visit Website</span>
                                </a>
                            </div><!-- .btn-group end -->
                        </article><!-- .portfolio-info end -->
                    </li><!-- grid_6 portfolio-style-1 end -->
                </ul><!-- 3filter-item end -->
                
                <ul class="grid_12 portfolio-pagination">
                    <li class="pagination">
                        <a class="pagination-prev" href="#">&#60; Previous</a>

                        <div class="pager">
                            <ul>
                                <li class="active">
                                    <a href="#">1</a>
                                </li>

                                <li>
                                    <a href="#">2</a>
                                </li>

                                <li>
                                    <a href="#">3</a>
                                </li>
                            </ul>
                        </div>

                        <a class="pagination-next" href="#">Next &#62;</a>
                    </li><!-- .pagination end -->
                </ul><!-- portfolio-pagination end -->
            </section><!-- .container_12 end -->
        </section><!-- #content-wrapper end -->

        <!-- #footer-wrapper start -->
        <div id="footer-wrapper" class="clearfix">

            <!-- #footer -->
            <footer id="footer" class="container_12">

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">

                        <section class="carousel-article">
                            <img src="img/red/logo-footer.png" alt="logo" />

                            <br /><br />

                            <ul id="foo1" class="carousel-li">
                                <li>
                                    <p>
                                        We proudly present you Metropolis, perfectly 
                                        clean and original theme. This is sliding 
                                        article, yo you can put more info about your 
                                        company.  
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>

                                <li>
                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error 
                                        sit voluptatem accusantium doloremque laudantium, 
                                        totam rem aperiam, eaque ipsa quae ab illo 
                                        inventore veritatis et quasi. 
                                    </p>
                                </li>
                            </ul>

                            <div class="clearfix"></div>

                            <div class="carousel-pagination" id="foo1_pag"></div>
                        </section>

                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    <!-- .widget pi_recent_posts start -->
                    <li class="widget pi_recent_posts">
                        <div class="title">
                            <h5>latest posts</h5>
                        </div>

                        <ul class="footer-blog">
                            <li>
                                <div class="meta">
                                    <a class="icon-edit"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html"> Nam libero tempore, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">0 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-link"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Temporibus autem quibusdam, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>

                            <li>
                                <div class="meta">
                                    <a class="icon-camera"></a>
                                </div>

                                <div class="post">
                                    <a href="blog-single.html">Excepteur sint occaecat cupid, </a>
                                    <p class="info">26 MARCH 2013, <a href="blog-single.html">2 COMMENTS</a></p>
                                </div>
                            </li>
                        </ul>


                    </li><!-- .widget pi_recent_posts end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>get in touch</h5>
                        </div>
                        <p>
                            If you have any questions don't hesitate to contact us
                        </p>

                        <br />

                        <ul class="contact-info">
                            <li class='address'>
                                <p>Address: Some street 123, Manhattan, New York, USA</p>
                            </li>

                            <li class="phone">
                                <p>Telephone: +00 123 5874</p>
                            </li>

                            <li class="mail">
                                <p>Email: <a href='mailto:sales-info@business.com'>info@business.com</a></p>
                            </li>
                        </ul>
                    </li><!-- .widget.widget_text end -->
                </ul><!-- .footer-widget-container end -->

                <!-- .footer-widget-container start -->
                <ul class="footer-widget-container grid_3">
                    
                    <!-- .widget.widget_text start -->
                    <li class="widget widget_text">
                        <div class="title">
                            <h5>newsletter subscribe</h5>
                        </div>

                        <p>
                            Stay up to date with latest news from our company. 
                            We promise we won’t spam you.
                        </p>

                        <br />

                        <form class="newsletter">
                            <input type="email" class="email" placeholder="Enter your email here...">
                            <input type ="submit" class="submit" value="SEND">
                        </form>
                    </li><!-- .widget.widget_text end -->

                </ul><!-- footer-widget-container end -->
            </footer><!-- #footer end -->

            <!-- .container_12.copyright-container start -->
            <div class="container_12 copyright-container">
                
                <!-- .grid_12 start -->
                <div class="grid_12">                  

                    <div class="grid_6 alpha">
                        <p>
                            Copyright Metropolis 2013. Designed by Pixel industry. All rights reserved.
                        </p>
                    </div>

                    <div class="grid_6 omega">
                        <ul class="footer-breadcrumbs">
                            <li>
                                <a href="index.html">Home</a>
                            </li>

                            <li>
                                <a href="about.html">About</a>
                            </li>

                            <li>
                                <a href="portfolio1.html">Portfolio</a>
                            </li>

                            <li>
                                <a href="blog.html">Blog</a>
                            </li>

                            <li>
                                <a href="contact.html">Contact</a>
                            </li>
                        </ul>
                    </div><!-- .grid_6 omega end -->
                </div><!-- .grid_12 end -->
            </div><!-- .container_12.copyright-container end -->
        </div><!-- #footer-wrapper end -->

        <!-- scripts -->
        <script  src="js/jquery-1.8.3.js"></script> <!-- jQuery library -->  
        <script  src="js/jquery.placeholder.min.js"></script><!-- jQuery placeholder fix for old browsers -->
        <script  src="js/jquery.carouFredSel-6.0.0-packed.js"></script><!-- CarouFredSel carousel plugin -->
        <script  src="js/portfolio.js"></script> <!-- portfolio custom options -->
        <script  src="js/quicksand.js"></script> <!-- quicksand filter -->
        <script  src="js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto lightbox -->
        <script  src="js/jquery.touchSwipe-1.2.5.js"></script><!-- support for touch swipe on mobile devices -->
        <script  src="style-switcher/styleSwitcher.js"></script><!-- Style Switcher plugin -->
        <script  src="js/include.js"></script> <!-- jQuery custom options -->

        <script>
            /* <![CDATA[ */
            // NEWSLETTER FORM AJAX SUBMIT
            $('.newsletter .submit').on('click', function(event){
                event.preventDefault();
                var email = $('.email').val();
                var form_data = new Array({ 'Email' : email});
                $.ajax({
                    type: 'POST',
                    url: "contact.php",
                    data: ({'action': 'newsletter', 'form_data' : form_data})
                }).done(function(data) {
                    alert(data);
                });
            });
            
            // FOOTER CAROUSEL ARTICLE 
            $("#foo1").carouFredSel({
                auto: true,
                scroll: 1,
                pagination: "#foo1_pag",
                swipe: {
                    ontouch: true,
                    onMouse: true
                },
                width: 'variable',
                height: 'variable',
                items:{
                    width: 'auto',
                    visible: 1
                }
            });
            /* ]]> */
        </script>
    </body>
</html>
